<template>
  <div>
    <div class="cellMain">
      <div class="item">
        <div class="item-title">入住时间</div>
        <div class="item-content">{{ fee.live_time }}</div>
      </div>
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="0px"
        class="demo-ruleForm"
        size="small"
      >
        <div class="item">
          <div class="item-title">起始时间</div>
          <div class="item-content">
            <el-form-item label="" prop="start_time">
              <el-date-picker
                v-model="formData.start_time"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期时间"
                :picker-options="dataPickerBeforeTodayOptions"
                style="width: 100%;"
                @change="changeStart"
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="item">
          <div class="item-title">空调及取暖费</div>
          <div class="item-content">
            <el-input
              v-model="formData.power_amount"
              type="number"
              @input="handleInput"
            >
              <template slot="append">元</template>
            </el-input>
          </div>
        </div>
        <div class="item">
          <div class="item-title">退住时间</div>
          <div class="item-content">
            <el-form-item label="" prop="leave_time">
              <el-date-picker
                v-model="formData.leave_time"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期时间"
                :picker-options="dataPickerBeforeTodayOptions"
                style="width: 100%;"
                @change="changeLeave"
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="item">
          <div class="item-title">居住详情</div>
          <!-- <div class="item-content" @click="checkDetail">
          <span>查看详细</span>
        </div> -->
          <div class="item-content">
            共住
            <span>{{ " " + formData.month + " " }}</span>
            月
            <span>{{ formData.day + " " }}</span>
            天
          </div>
        </div>
        <div class="item">
          <div class="item-title">总金额</div>
          <div class="item-content">
            <el-input
              v-model="formData.total_amount"
              :readonly="true"
              type="text"
            >
              <template slot="append">元</template>
            </el-input>
          </div>
        </div>
        <div class="item">
          <div class="item-title">实收金额</div>
          <div class="item-content">
            <el-form-item label="" prop="amount">
              <el-input v-model="formData.amount" type="number">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>

            <span style="color: #f00;" @click="detail">明细</span>
          </div>
        </div>
      </el-form>
      <div class="dialog-detail-main">
        <el-table
          ref="tableSort"
          :data="list"
          :header-row-style="{ background: 'rgb(64, 158, 255)' }"
          :header-cell-style="{
            background: 'rgb(64, 158, 255)',
            color: '#fff',
          }"
          :highlight-current-row="false"
          class="tableSort"
        >
          <el-table-column
            show-overflow-tooltip
            prop="bed_amount"
            label="床位费用"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="护理费用"
            prop="care_amount"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="管理费用"
            prop="manage_amount"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="用餐费用"
            prop="meal_amount"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="日用品费用"
            prop="other_amount"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="空调及取暖费"
            prop="power_amount"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="入住时长"
            prop="day"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="总金额"
            prop="total_amount"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="实收金额"
            prop="amount"
            align="center"
          ></el-table-column>
        </el-table>
        <div style=" padding: 10px 0 0; color: #f00; text-align: right;">
          每月按30天计算：（床位费+护理费+管理费+用餐费）/30*天数 +
          (床位费+护理费+管理费+用餐费) * 月数 + 空调及取暖费 + 日用品费 =
          总金额
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getBed } from "@/api/building";
  import { leave, feeslist } from "@/api/oldermanager";
  import { getListNursing } from "@/api/nursingcost";
  import { getListFood } from "@/api/foodcost";
  export default {
    name: "Index",
    components: {},
    filters: {
      sexFilter(val) {
        if (val == 1) {
          return "男";
        } else {
          return "女";
        }
      },
    },
    props: {
      data: {
        type: Object,
        default() {
          return {
            discountAmount: 0,
          };
        },
      },
    },
    data() {
      return {
        total: 0,
        dialogVisible: false,
        list: [],
        nursingData: [],
        foodData: [],
        base: {},
        fee: {
          bed: {},
          care: {},
          meal: {},
        },
        ruleForm: {},
        formData: {
          power_amount: 0,
          month: 0,
          day: 0,
          manage_amount: 0,
          bed_amount: 0,
          meal_amount: 0,
          care_amount: 0,
          other_amount: 0,
          total_amount: 0,
          amount: 0,
        },
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
        rules: {
          leave_time: [
            { required: true, message: "请选择离住时间", trigger: "change" },
          ],
          amount: [
            { required: true, message: "填写实收金额", trigger: "blur" },
          ],
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getNursingData();
      if (JSON.stringify(this.data) !== "{}") {
        this.ruleForm = this.data;
        this.base = this.ruleForm.base;
        this.fee = this.ruleForm.fees;
        this.$set(this.formData, "e_id", this.base.id);
        this.$set(this.formData, "discountAmount", 0);
        this.$set(this.formData, "start_time", this.fee.live_time);
        // let params = {
        //   id: this.fee.bed_id,
        // };
        // if (this.fee.bed_id) this.getBedData(params);
        this.list = [
          {
            bed_amount: (
              (this.formData.bed_amount / 30) *
              (this.formData.month * 30 + this.formData.day)
            ).toFixed(2),
            care_amount: (
              (this.formData.care_amount / 30) *
              (this.formData.month * 30 + this.formData.day)
            ).toFixed(2),
            manage_amount:
              (this.formData.manage_amount / 30) *
              (this.formData.month * 30 + this.formData.day).toFixed(2),
            meal_amount: (
              (this.formData.meal_amount / 30) *
              (this.formData.month * 30 + this.formData.day)
            ).toFixed(2),
            power_amount: this.formData.power_amount,
            other_amount: this.formData.other_amount,
            total_amount: this.formData.total_amount,
            amount: this.formData.amount,
          },
        ];
      }
    },
    methods: {
      getNursingData(data) {
        getListNursing("get", data).then((resp) => {
          if (resp.code === 200) {
            this.nursingData = resp.data.list;
            if (this.fee.care_id) this.handleNursing(this.fee.care_id);
          }
        });
      },
      getFoodData(data) {
        getListFood("get", data).then((resp) => {
          if (resp.code === 200) {
            this.foodData = resp.data.list;
          }
        });
      },
      handleNursing(value) {
        for (let i = 0; i < this.nursingData.length; i++) {
          const element = this.nursingData[i];
          if (element.id == value) {
            this.$set(this.fee, "care_name", element.price);
            this.$set(this.fee, "manage_price", element.manage_price);
          }
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getBedData(data) {
        getBed("get", data).then((resp) => {
          if (resp.code === 200) {
            let data = resp.data;
            this.$set(this.fee, "price", data.price);
          }
        });
      },
      handleChange(value) {
        console.log(value);
      },
      leave() {
        this.$refs["formData"].validate(async (valid) => {
          if (valid) {
            leave("post", this.formData).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "手续办理完成",
                });
                this.$emit("cancelLeave", "update");
                this.formData = {};
              }
            });
          }
        });
      },
      changeStart(value) {
        let params = {
          start_time: value,
          e_id: this.base.id,
          leave_time: this.formData.leave_time,
        };
        feeslist("get", params).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            let everyMonth =
              parseInt(resp.data.bed_price) +
              parseInt(resp.data.care_price) +
              parseInt(resp.data.manage_price) +
              parseInt(resp.data.meal_price);
            let everyDay = everyMonth / 30;
            let totalMonth = everyMonth * resp.data.month;
            let totalDay = everyDay * resp.data.day;
            let total =
              totalMonth +
              totalDay +
              parseInt(this.formData.power_amount) +
              parseInt(resp.data.other_amount);
            this.$set(this.formData, "total_amount", total.toFixed(2));
            this.$set(this.formData, "amount", total.toFixed(2));
            this.$set(this.formData, "bed_amount", resp.data.bed_price);
            this.$set(this.formData, "meal_amount", resp.data.meal_price);
            this.$set(this.formData, "care_amount", resp.data.care_price);
            this.$set(this.formData, "manage_amount", resp.data.manage_price);
            this.$set(this.formData, "month", resp.data.month);
            this.$set(this.formData, "day", resp.data.day);
            this.$set(this.formData, "e_id", this.base.id);
            this.total = totalMonth + totalDay;
            this.detail();
          }
        });
      },
      changeLeave(value) {
        let params = {
          leave_time: value,
          e_id: this.base.id,
        };
        feeslist("get", params).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            let everyMonth =
              parseInt(resp.data.bed_price) +
              parseInt(resp.data.care_price) +
              parseInt(resp.data.manage_price) +
              parseInt(resp.data.meal_price);
            let everyDay = everyMonth / 30;
            let totalMonth = everyMonth * resp.data.month;
            let totalDay = everyDay * resp.data.day;
            let total =
              totalMonth +
              totalDay +
              parseInt(this.formData.power_amount) +
              parseInt(resp.data.other_amount);
            this.$set(this.formData, "total_amount", total.toFixed(2));
            this.$set(this.formData, "amount", total.toFixed(2));
            this.$set(this.formData, "bed_amount", resp.data.bed_price);
            this.$set(this.formData, "meal_amount", resp.data.meal_price);
            this.$set(this.formData, "care_amount", resp.data.care_price);
            this.$set(this.formData, "manage_amount", resp.data.manage_price);
            this.$set(this.formData, "month", resp.data.month);
            this.$set(this.formData, "day", resp.data.day);
            this.$set(this.formData, "e_id", this.base.id);
            this.total = totalMonth + totalDay;
            this.detail();
          }
        });
      },
      handleInput(value) {
        let num = this.total + parseInt(value);
        this.$set(this.formData, "total_amount", num.toFixed(2));
        this.$set(this.formData, "amount", num.toFixed(2));
      },
      cancel() {
        this.$emit("cancelLeave");
      },
      checkDetail() {
        this.$emit("checkDetail", this.base.id);
      },
      detail() {
        this.list = [
          {
            bed_amount: (
              (this.formData.bed_amount / 30) *
              (this.formData.month * 30 + this.formData.day)
            ).toFixed(2),
            care_amount: (
              (this.formData.care_amount / 30) *
              (this.formData.month * 30 + this.formData.day)
            ).toFixed(2),
            manage_amount:
              (this.formData.manage_amount / 30) *
              (this.formData.month * 30 + this.formData.day).toFixed(2),
            meal_amount: (
              (this.formData.meal_amount / 30) *
              (this.formData.month * 30 + this.formData.day)
            ).toFixed(2),
            power_amount: this.formData.power_amount,
            other_amount: this.formData.other_amount,
            total_amount: this.formData.total_amount,
            amount: this.formData.amount,
          },
        ];
      },
      closeDialog() {
        this.dialogVisible = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .cellMain {
    margin-bottom: 24px;
    border-right: 1px solid #dddfe7;
    border-bottom: 1px solid #dddfe7;

    .item {
      display: flex;
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-top: 1px solid #dddfe7;
      border-left: 1px solid #dddfe7;

      .item-title {
        box-sizing: border-box;
        flex: 0 0 104px;
        width: 104px;
        padding-right: 12px;
        font-size: 16px;
        color: #999;
        text-align: right;
        background: #f6f7fa;
        border-right: 1px solid #dddfe7;
      }

      .item-content {
        display: flex;
        flex: 1;
        align-items: center;
        padding-right: 12px;
        padding-left: 12px;

        span {
          padding: 0 10px;
          font-size: 16px;
          color: #1791ff;
          cursor: pointer;
        }
      }
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .demo-ruleForm {
    padding: 0 !important;

    .el-form-item {
      margin-bottom: 0;
    }
  }
</style>
